{% extends "base.html" %}
{% import "page.html" as page %}
{% block content %}
    <div id="department_list" class="content-wrapper list">
        <section class="content-header">
            <h1>
                部门管理
                <small>
                    默认每页显示25条数据
                </small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="{{ url_for('index.index') }}"><i class="fa fa-dashboard"></i> Home</a></li>
                <li> 管理员配置 </li>
                <li class="active"> 部门管理 </li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            部门列表
                            {% if current_user.role.name == 'Admin' or current_user.role.name == 'Ops' %}
                                <button type="button" class="btn btn-primary btn-sm" style="float:right;margin-top:-5px"
                                        data-target=".add-dpt-modal" data-toggle="modal">添加部门
                                </button>
                            {% endif %}
                            <div class="modal fade add-dpt-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">部门信息</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label for="inputDptName"
                                                           class="col-sm-2 control-label">部门名称</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" id="inputDptName"
                                                               placeholder="名称" v-model="new_dpt_name">
                                                    </div>
                                                </div>
                                            </form>
                                            <div style="color:red;text-align:center" v-if="errMsg"
                                                 v-text="errMsg"></div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="add_dpt()">提交</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>部门名称</th>
                                        {% if current_user.role.name == 'Admin' or current_user.role.name == 'Ops' %}
                                            <th>操作</th>
                                        {% endif %}
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for dpt in dpts %}
                                        <tr>
                                            <td>{{ dpt.name }}</td>
                                            {% if current_user.role.name == 'Admin' or current_user.role.name == 'Ops' %}
                                                <td><span class="label label-success" style="margin-right:10px;cursor:pointer"
                                                          data-toggle="modal" @click="modify_dpt_id='{{ dpt.id }}', modify_dpt_name='{{ dpt.name }}'"
                                                          data-target=".modify-dpt-modal">修改
                                                    </span>
                                                    <span class="label label-danger"
                                                        style="margin-right:10px;cursor:pointer"
                                                        @click="show_delete_dpt_modal('{{ dpt.id }}')">删除
                                                    </span>
                                                </td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% if pagination %}
                                <div class="pagination" style="float:right">
                                    {{ page.pagination_widget(pagination,"assets.assets_department") }}
                                </div>
                            {% endif %}
                            <div class="modal fade delete-dpt-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel4" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel4">删除部门</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label style="text-align: center" class="col-sm-5 control-label">确认是否删除该部门?</label>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="delete_dpt()">删除
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal fade modify-dpt-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel2" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel2">修改部门信息</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label for="modifyDptName"
                                                           class="col-sm-2 control-label">部门名称</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" id="modifyDptName"
                                                               placeholder="名称" v-model="modify_dpt_name">
                                                    </div>
                                                </div>
                                            </form>
                                            <div style="color:red;text-align:center" v-if="errMsg"
                                                 v-text="errMsg"></div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="modify_dpt()">修改
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
{% endblock %}
{% block bottom_js %}
    <script>
        window.onload = function(){
            if(({{ menu|tojson }}) in { 'user_list':'', 'department_list':'', 'role_list':'', 'permission_list':'' }){
                $('#asset_manage').addClass('active').addClass('menu-open');
            }else{
                $('#asset_manage').removeClass('active').removeClass('menu-open');
            }
        };
        data = {
            search:'',
            new_dpt_name:'',
            modify_dpt_id:'',
            modify_dpt_name:'',
            errMsg:'',
            errMsg2:'',
        };
        function check_search(){
            if($.trim(data.search).length === 0){
                return false;
            }
        }
        new Vue({
            el: '.list',
            data: data,
            methods: {
                add_dpt: function(){
                    let dpt_name = this.new_dpt_name;
                    add_dpt(dpt_name);
                },
                show_delete_dpt_modal: function(dpt_id){
                    this.dpt_id = dpt_id;
                    $('.delete-dpt-modal').modal('show');
                },
                delete_dpt: function(){
                    delete_dpt(this.dpt_id);
                },
                modify_dpt: function(){
                    let dpt_id = this.modify_dpt_id;
                    let dpt_name = this.modify_dpt_name;
                    modify_dpt(dpt_id,dpt_name);
                },
            }
        });

        function add_dpt(dpt_name){
            if($.trim(dpt_name).length === 0){
                data.errMsg = '部门名称不能为空！';
                return false;
            }
            $.ajax({
                url:"{{url_for('api_assets.api_assets_department')}}",
                data:{'department_name':$.trim(dpt_name)},
                timeout:10000,
                type:'post',
                success:function(response){
                    if(response.resCode === 1){
                        swal({
                            type: 'success',
                            title: '添加成功',
                            showConfirmButton: true,
                            }).then(function () {
                                window.location.reload();
                            });
                        $('.add-dpt-modal').modal('hide');
                    } else {
                        swal("添加失败",response.errMsg,"error");
                    }
                }
            })
        }

        function delete_dpt(dpt_id){
            $.ajax({
                url:"{{url_for('api_assets.api_assets_department')}}",
                data:{'delete_id':dpt_id},
                timeout:10000,
                type:'delete',
                success:function(response){
                    if(response.resCode === 1){
                        swal({
                            type: 'success',
                            title: '删除成功',
                            showConfirmButton: false,
                            timer: 1500
                            }).then(function () {
                                window.location.reload();
                            });
                        $('.delete-dpt-modal').modal('hide');
                    } else {
                        swal({
                          type: 'error',
                          title: '删除失败',
                          showConfirmButton: false,
                          timer: 1500
                        })
                    }
                },
                error:function(xhr){
                    swal({
                        type: 'error',
                        text: xhr.responseText,
                        showConfirmButton: true,
                    })
                }
            })
        }

        function modify_dpt(dpt_id,dpt_name){
            if($.trim(dpt_name).length === 0){
                data.errMsg = '部门名称不能为空！';
                return;
            }
            $.ajax({
                url:"{{url_for('api_assets.api_assets_department')}}",
                data:{
                    'modify_name':$.trim(dpt_name),
                    'modify_id':$.trim(dpt_id)
                },
                timeout:10000,
                type:'put',
                success:function(response){
                    if(response.resCode === 1){
                        swal({
                            type: 'success',
                            title: '修改成功',
                            showConfirmButton: false,
                            timer: 1500
                            }).then(function () {
                                window.location.reload();
                            });
                        $('.modify-dpt-modal').modal('hide');
                    } else {
                        swal("修改失败",response.errMsg,"error");
                    }
                },
                error:function(response){
                    $.notify({
                        title: "<strong>部门修改错误:</strong><br>",
                        message: response.responseText
                    },
                    {
                        type: 'danger',
                        delay: 3600000
                    });
                }
            })
        }
    </script>
{% endblock %}